<script setup>
	import image1 from "../assets/goods/1.png"
	import image2 from "../assets/goods/2.png"
	import image3 from "../assets/goods/3.jpg"
	
</script>

<template>
	<h1>商品图</h1>
	<div class="content">
		<div class="item">
			<img  src="../assets/goods/1.png"/>
		</div>
		<div class="item">
			<img  src="../assets/goods/2.png"/>
			<span class="desc"></span>
		</div>
		<div class="item">
			<img  src="../assets/goods/3.jpg"/>
			<span class="desc"></span>
		</div>
		
	</div>
	
</template>

<style scoped>
	.content {
		width: 800px;
		height: 320px;
		padding-left: 20px;
		margin: 80px auto;
	}
	.item {
		width: 230px;
		height: 300px;
		text-align: center;
		margin-right: 20px;
		background-color: #FFF;
		float: left;
		position: relative;
		top: 0;
		overflow: hidden;/* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */
		transition: all .5s;/* 从最初到鼠标悬停时的过渡 */
	}
	
	.item img {
		margin-top: 30px;
	}
	
	.item .desc {
	    position: absolute;
	    left: 0;
	    bottom: -80px;
	    width: 100%;
	    height: 80px;
	    background-color: #ff6700;
	    transition: all .5s;
	}
	
	/* 鼠标悬停时，让 item 整体往上移动5px，且加一点阴影 */
	.item:hover {
	    top: -5px;
	    box-shadow: 0 0 15px #AAA;
	}
	
	/* 鼠标悬停时，让下方的橙色方形现身 */
	.item:hover .desc {
	    bottom: 0;
	}
	
	
</style>